<template>
	<view>
		<view class="as_item_good">
			<image src="https://aliyunoss.hntgov.net/image/2023/04/03/434bc1d204e14ed29ad56f88a89c2d22.jpg"></image>
			<view class="as_item_info">
				<view class="as_item_info_item">
					<text class="as_item_info_name">神秘湘西全域旅游卡（24小
时发货，此商品不支持退货品不支持退货货品不支持退货</text>
					<text style="font-size: 32rpx;color: #3D3D3D;position: absolute;right: 0rpx;">168.00</text>
				</view>
				<view class="as_item_info_item" style="margin-top: 10rpx;">
					<text class="as_item_info_type">电子卡（我已阅读使用须知）</text>

					<text style="color: #AFA9A9;
		font-size: 22rpx;position: absolute;right: 0rpx;">x 1</text>
				</view>
				<text class="as_item_tag" v-if="false">限时抢</text>
			</view>
		</view>
		<view class="pas_item" >
			<text class="pas_item_text">货物状态<text style="color: #ED2D38;">*</text></text>
			<u-input v-model="logistics" type="select" :border="border" @click="show = true"
				style="margin-left: 30rpx;" />
		</view>
		<view class="pas_item_price">
			<view style="display: flex;align-items: center;"><text class="pas_item_price_text">退款金额</text> ￥<input
					type="text" v-model="applyMoney" style="width: 100rpx;" :disabled="index==1"><text
					style="font-size: 24rpx;color: #AFA9A9;" v-if="index==1">（此次售后不可以修改金额）</text></view>
			<!-- <text style="color:#AFA9A9;padding-left: 146rpx;font-size: 24rpx;">实付￥{{payable_amount}}</text> -->
			<view style="display: flex;align-items: center;margin-top: 20rpx;" v-if="index==2"><text
					class="pas_item_price_text">退款件数</text>
				<input type="text" v-model="obj.refund_count" style="width: 100rpx;">
			</view>
			<text style="color:#696969;font-size: 28rpx;position: absolute;right: 30rpx;"
				v-if="index==2">未发货的件数也将一并退款</text>
			<view style="display: flex;align-items: center;margin-top: 60rpx;"><text
					class="pas_item_price_text">退款说明</text>
				<u-input v-model="obj.refundDesc" placeholder='请输入退款说明' :type="type" :auto-height="autoHeight"
					:height="height" :border="border" style="width: 534rpx;" />
			</view>
		</view>
		<view style="padding: 30rpx;margin-top: 20rpx;background-color: #fff;display: flex;">
			<text class="pas_item_price_text" style="padding-right: 16rpx;">上传凭证</text>
			<view style="display: flex;flex-wrap: wrap;width: 543rpx;">
				<view v-for="(item,index) in imagesList" :key='index' style="margin-right: 23rpx;">
					<view
						style="position: relative;width:135rpx;height: 135rpx;margin-bottom: 20rpx;margin-left: 24rpx;">
						<image :src="item"
							style="width:120rpx;height: 120rpx;border: 1rpx #dfdfdf solid;position: absolute;top: 0rpx;left: 0rpx;">
						</image>
						<image src="http://cdn.hntgov.net/online/static/imagedelete.jpg"
							style="width: 30rpx;height: 30rpx;position: absolute;right: 0rpx;top: -15rpx;border-radius: 40rpx;"
							@tap="deleteImageOther(index)"></image>
					</view>
				</view>
				<image @click="chooseTheImg" src="http://cdn.hntgov.net/online/static/as_add.png"
					style="width: 182rpx;height: 176rpx;"></image>

			</view>
		</view>
		<view class="pas_button" @tap='simitPlay'>提交申请</view>
		<u-select v-model="show" title='请选择货物状态' mode="single-column" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	var that = ''
	export default {
		data() {
			return {
				value: '',
				show: false,
				border: true,
				list: [{
						value: 'NOSHIPPED',
						label: '未发货'
					},
					{
						value: 'SHIPPED',
						label: '已发货'
					}
				],
				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				type: 'textarea',
				autoHeight: true,
				height: 30,
				border: false,
				imageList: [],
				productInfo: '',
				productNum: '',
				orderId: '',
				index: 1,
				payable_amount: 0,
				logistics: '',
				imagesList: [],
				applyMoney:0,
				obj: {
					"orderId": "", //订单ID，关联订单表id
					"refundType": "", //售后类型(after.RefundType),1退款，2退款退货
					"applyMoney": '', //申请退款金额
					"num": 0, //退货数量
					"logistics": "", //物流状态(after.LogisticsStatus)，1未发货,2已发货
					"refundDesc": "", //退款说明
					"refundPic": "" //退款上传凭证图片，多张以“，”分开
				},
				info:''

			}
		},
		onLoad(e) {
			that = this
			this.info=uni.getStorageSync('info')
            this.applyMoney=(this.info.payableAmount/100).toFixed(2)
			this.obj.applyMoney=this.info.payableAmount
			this.obj.num=this.info.buyNum
			this.obj.refundType = e.index
			this.obj.orderId = this.info.orderId
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: '售后申请'
			})
		},
		methods: {
			confirm(e) {
				this.obj.logistics = e[0].value
				this.logistics = e[0].label
			},
			deleteImageOther(e) {
				that.imagesList.splice(e, 1)
			},
			simitPlay() {
				if (this.obj.logistics == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择货物状态',
						duration: 3000
					})
					return
				}
				if (this.obj.refundDesc == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入退款原因',
						duration: 3000
					})
					return
				}

				this.obj.refundPic = this.imagesList.toString()
				this.$u.api.refund(this.obj).then(res => {
					if (res) {
						uni.redirectTo({
							url: 'asdetail?id='+res.id
						})
					}
				})

			},
			chooseTheImg() {
				uni.chooseImage({
					count: 5, //图片可选择数量
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					success: res => {
						let imgFiles = res.tempFilePaths //图片的本地文件路径列表	
						imgFiles.forEach(item => {
							uni.uploadFile({
								url: "http://dscp-dev.hn12301.net/h5-api/oss/upload",
								header: {
									Authorization: 'Bearer ' + uni.getStorageSync('token')
								},
								filePath: item,
								name: "file",
								success(d) {
									if (that.imagesList.length < 5) {
										that.imagesList.push(JSON.parse(d.data).data.fileUrl)
									} else {
										uni.showToast({
											duration: 3000,
											icon: 'none',
											title: '最多只能传5张'
										})
									}
								},
							})
						})

					}
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.pas_button {
		color: #fff;
		font-size: 28rpx;
		background-color: #3278E7;
		border-radius: 98rpx;
		position: absolute;
		width: 630rpx;
		height: 98rpx;
		left: 60rpx;
		bottom: 140rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.as_item_tag {
		padding: 2rpx;
		color: #ED2D38;
		font-size: 20rpx;
		border-radius: 4rpx;
		border: 1rpx solid #ED2D38;
	}

	.pas_item_price_text {
		font-size: 28rpx;
		color: #696969;
		padding-right: 40rpx;
	}

	.pas_item_price {
		width: 750rpx;
		padding: 30rpx;
		margin-top: 20rpx;

		background-color: #fff;
	}

	.pas_item {
		height: 98rpx;
		width: 750rpx;
		display: flex;
		align-items: center;
		padding: 0rpx 30rpx 0rpx 30rpx;
		background-color: #fff;
		margin-top: 20rpx;
		position: relative;
	}

	.pas_item_text {
		font-size: 28rpx;
		color: #696969;
	}

	.as_item_good image {
		width: 144rpx;
		height: 144rpx;
		border-radius: 8rpx;
	}

	.as_item_good {
		background-color: #fff;
		padding: 30rpx;
		display: flex;

		.as_item_info {
			width: 524rpx;
			margin-left: 20rpx;
		}

		.as_item_info_item {
			display: flex;
			position: relative;
		}

		.as_item_info_name {
			width: 402rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			overflow: hidden;
			-webkit-line-clamp: 2;
			color: #696969;
			font-size: 26rpx;
		}

		.as_item_info_type {
			color: #AFA9A9;
			font-size: 22rpx;
		}
	}
</style>